<!-- <script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style> -->
<template>
  <div>
    <div class="card-header">学习计划表</div>
    <!-- 提交区域 -->
    <div class="card-body">
      <form @submit.prevent="add">
        <div class="row g-4">
          <!-- 学习科目  trim 去除空格-->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习科目</span>
              <input type="text" class="form-control" placeholder="请输入学习的科目" v-model.trim="subject">
            </div>
          </div>
          <!-- 学习任务 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习内容</span>
              <textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容" :style="{height: '32px'}"></textarea>
            </div>
          </div>
          <!-- 学习地点 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习地点</span>
              <select class="form-select form-select-sm" v-model="selectOption">
                <option v-for="option in options" :value="option.place" :key="option.placeCode">
                  {{ option.place }}
                </option>
              </select>
            </div>
          </div>
          <!-- 添加按钮 -->
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加</button>
          </div>

        </div>
      </form>

    </div>
    <table class="table table-striped table-hover table-bordered">
      <thead>
        <tr>
          <th>序号</th>
          <th>学习科目</th>
          <th>学习内容</th>
          <th>学习地点</th>
          <th>完成状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>序号</td>
          <td>学习科目</td>
          <td>学习内容</td>
          <td>学习地点</td>
          <td>完成状态</td>
          <td>操作</td>
        </tr>
      </tbody>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.subject }}</td>
          <td>{{ item.content }}</td>
          <td>{{ item.place }}</td>
          <td>
            <div class="form-check form-switch">
              <!-- id="flewSwitchCheckDefault" -->
              <input type="checkbox" class="form-check-input" role="switch" :id="'cb'+item.id"
                v-model="item.status">
              <label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已完成</label>
              <label class="form-check-label" :for="'cb' + item.id" v-else="item.status">未完成</label>
            </div>
          </td>
          <td>
            <!-- <a href="javascript:;" @click="remove(item.id)">删除</a> -->
            <a href="javascript:;" @click="remove(item.id,item.status)">删除</a>
          </td>
        </tr>
      </tbody>

    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

   const list = ref([
    {
      id:  '1',
      subject:'Vue.js前端实战开发',
      content:'学习指令，例如v-if ,v-for,v-model',
      place:'自习室',
      status:false
    }
   ])
   // 删除方法
  //  const remove =  id =>{
  //     list.value = list.value.filter(item => item.id !== id)
  //  }

// 优化的删除方法 ，对未完成的任务状态判断
    let remove = (id,status) =>{
      if(status){
        list.value = list.value.filter(item => item.id !== id)
      }else{
        alert("完成任务后在进行删除！")
      }
    }

    // 完成添加任务
    let subject = ref('')
    let content = ref('')
    let nextId = ref('')// 新添加数据的id
    let selectOption = ref('自习室') // 默认学习地点
    let options = ref([ // 学习地点的选择
      {placeCode:0,place:'自习室'},
      {placeCode:1,place:'图书馆'},
      {placeCode:2,place:'寝室'},
      ])

      let add = ()=>{
        if(subject.value === ''){
          alert("学习科目不能为空！")
          return
        }
        nextId.value = Math.max(...list.value.map(item =>item.id))+1
        const obj = {
          id :nextId.value,
          subject:subject.value,
          content:content.value,
          place:selectOption.value,
          status:false
        }
        list.value.push(obj)
        subject.value = ''
        content.value=''
        selectOption.value='自习室'
      }
</script>

<style  scoped>

</style>